<template>
    <div style="position: relative;height: 100%;">
        <a-card :bordered="false" class="mb-2">
            <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState"
                class="ant-advanced-search-form">
                <a-row :gutter="24">
                    <a-col :span="6">
                        <a-form-item label="项目名称" name="name">
                            <a-input v-model:value="searchFormState.name" placeholder="请输入项目名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="项目编号" name="code">
                            <a-input v-model:value="searchFormState.code" placeholder="请输入项目编号" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="负责人" name="director">
                            <a-input v-model:value="searchFormState.director" placeholder="请输入项目经理" />
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="6">
                        <a-form-item label="客户名称" name="custom">
                            <a-input v-model:value="searchFormState.custom" placeholder="请输入客户名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="项目经理" name="director">
                            <a-input v-model:value="searchFormState.director" placeholder="请输入项目经理" />
                        </a-form-item>
                    </a-col> -->
                    <a-col :span="6" v-show="advanced">
                        <a-form-item label="项目进度" name="phase">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.phase"
                                :options="progressOptions"></a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6" v-show="advanced">
                        <a-form-item label="项目类型" name="type">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.type" :options="xmtypes"></a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6" v-show="advanced">
                        <a-form-item label="投标类型" name="type">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.bidType"
                                :options="tbtypes"></a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                        <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                        <a @click="toggleAdvanced" style="margin-left: 8px">
                            {{ advanced ? '收起' : '展开' }}
                            <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
                        </a>
                    </a-col>
                </a-row>
            </a-form>
        </a-card>
        <a-card :bordered="false">
            <s-table :tool-config="toolConfig" :scroll="{ x: 1300, }" ref="tableRef" :data="loadData" bordered
                :columns="columns" class="mb-2">

                <template #operator class="table-operator">
                    <div style="display: flex; justify-content: space-between">
                        <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="searchFormState.role" style="width: 120px" :options="roles"
                            :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                        </a-select>
                        <!-- <a-space>
                            <a-button type="primary" @click="add()">
                                <template #icon>
                                    <plus-outlined />
                                </template>
<span>新增</span>
</a-button>
</a-space> -->
                    </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">
                        {{ index + 1 }}
                    </template>
                    <template v-if="column.key === 'type'">
                        {{ xmtypes.find(x => x.value == record.type)?.label }}
                    </template>

                    <template v-if="column.key === 'bidType'">
                        {{ tbtypes.find(x => x.value == record.bidType)?.label }}
                    </template>

                    <template v-if="column.key === 'status'">
                        <div :style="{ 'background-color': getColorByValue(record.status) }"
                            class=" w-20 rounded text-center text-white">
                            {{ progressOptions.find(item => item.value === record.status)?.label }}
                        </div>
                    </template>

                    <template v-if="column.key === 'control'">
                        <div>
                            <a @click="pminfoOnOpen(record)">查看</a>
                            <!-- <a @click="onOpen(record)">编辑</a>
                            <a-divider type="vertical" />
                            <a-popconfirm title="确定删除此数据源？" @confirm="remove(record)">
                                <a-button type="link" danger size="small">删除</a-button>
                            </a-popconfirm> -->
                        </div>
                    </template>
                </template>
            </s-table>
        </a-card>
       
        <!-- <edit ref="pmedit" @OnClose="OnClose"></edit> -->
        <!-- <pminfo ref="pminfoModel" @OnClose="pminfoOnClose" :id="100"></pminfo> -->
    </div>
</template>

<script setup name="steps">

import pmApi from '@/api/pm/pm/index'
// import edit from './components/edit.vue'
// import pminfo from './components/info.vue'
import { progressOptions, roles, tbtypes, xmtypes } from '@/utils/constants.js'
const tableRef = ref()
const showFliter = ref(false)
const pminfoModel = ref()
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const searchFormState = ref({
})
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
    advanced.value = !advanced.value
}
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 70,
    },
    {
        title: '项目编号',
        dataIndex: 'code',
        key: 'code',
        width: 150,
        align: 'center'
    },
    {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        width: 180,
        align: "center",
    },
    {
        title: '项目类型',
        dataIndex: 'type',
        key: 'type',
        width: 120,
        align: "center",
    },
    {
        title: '投标类型',
        dataIndex: 'bidType',
        key: 'bidType',
        width: 120,
        align: "center",
    },

    {
        title: '客户',
        dataIndex: 'custom',
        key: 'custom', width: 120,
        align: "center",
    },
    {
        title: '项目状态',
        dataIndex: 'status',
        key: 'status',
        width: 120,
        align: "center",
    },
    // {
    //     title: '施工进度',
    //     dataIndex: 'progress',
    //     key: 'progress',
    //     width: 120,
    //     align: "center",
    // },
    {
        title: '项目经理',
        dataIndex: 'directorName',
        key: 'directorName',
        width: 120,
        align: "center",

    },
    {
        title: '项目总金额',
        dataIndex: 'esAmount',
        key: 'esAmount',
        width: 120,
        align: "center",
    },
    {
        title: '收入合同金额',
        dataIndex: 'prototlebudget',
        key: 'prototlebudget',
        width: 120,
        align: "center",
    },
    {
        title: '实际成本',
        dataIndex: 'actualCost',
        key: 'actualCost',
        width: 120,
        align: "center",
    },
    {
        title: '预算偏差率',
        dataIndex: 'budgetuserate',
        key: 'budgetuserate', width: 120,
        align: "center",
    },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: 120,
        align: "center",
        fixed: "right"
    },
]

const reset = () => {
    searchFormState.value = {}
}
const loadData = (parameter) => {
    console.log('loadData.parameter', parameter)
    searchFormState.value.current = parameter.current
    searchFormState.value.size = parameter.size
    return pmApi.proinfopage(searchFormState.value).then((res) => {
        return res
    })
}



const getColorByValue = (value) => {
    // 使用 find() 方法查找 value 对应的元素\
    if (value == null) {
        return "red";
    }
    const target = progressOptions.find(item => item.value === value);

    // 如果找到了对应元素，则返回其 color 属性；否则返回 null 或者默认颜色
    return target ? target.color : 'gray';
}

const remove = (record) => {
    pmApi.proinfodelete([{ "id": record.id }]).then(() => {
        tableRef.value.refresh(true)
    })
    console.log("remove id", record)
}
const pmedit = ref()
const pmdata = ref([])
const onOpen = (record) => {
    pmdata.value = record;
    pmedit.value.show(record)
}


const add = () => {
    pmdata.value = null;
    pmedit.value.show()
}

const OnClose = (refresh) => {
    if (refresh) {
        tableRef.value.refresh(true)
    }
}


const pminfoOnOpen = (record) => {
    pminfoModel.value.show(record)
}
const pminfoOnClose = () => {
   
}
</script>
<style scoped></style>
